<template>
	<view>
		<!-- 头部区域 开始 -->
		<my-head></my-head>
		<!-- 头部区域 结束 -->

		<!-- 搜索区域 开始 -->
		<view class="search">
			<view class="search-head">
				<!-- 搜索框 -->
				<uni-search-bar
					class="uni-search-bar"
					:radius="10"
					cancelButton="auto"
					clearButton="auto"
					v-model="search.proposal"
					@focus="clearProposal"
					@cancel="previousPage"
					@input="input"
					@confirm="enter"
				></uni-search-bar>
			</view>

			<!-- 搜索历史 开始-->
			<view class="hot-search">
				<view class="hot-search-head">
					<text>搜索历史</text>
					<view @click="stretch" class="animate__animated" hover-class="animate__fadeIn">
						{{ historicalRecords.openClose }}
					</view>
				</view>

				<view class="hot-search-body" v-if="historicalRecords.historyList.length > 0">
					<!-- 高度自适应 -->
					<scroll-view
						v-if="historicalRecords.heightAutomatic"
						class="scroll-view animate__animated animate__fadeIn"
					>
						<view class="scroll-view-item" v-for="(item, i) in recordRev" :key="i">
							<uni-tag class="uni-tag" :text="item"></uni-tag>
						</view>
					</scroll-view>

					<!-- 高度固定 -->
					<scroll-view
						v-else
						:class="[
							'scroll-view',
							historicalRecords.openClose === '收起'
								? 'animate__animated animate__flipInX'
								: 'animate__animated animate__fadeIn'
						]"
						scroll-y
						:style="'height:' + historicalRecords.historyHeight + 'rpx'"
						:scroll-top="historicalRecords.scrollTop"
						@scroll="scroll"
					>
						<view
							class="scroll-view-item"
							v-for="(item, i) in historicalRecords.historyList"
							:key="i"
						>
							<uni-tag class="uni-tag" :text="item"></uni-tag>
						</view>
					</scroll-view>

					<!-- 删除历史记录 -->
					<view class="delete" @click="deleteHistory">
						<uni-icons type="trash" size="40rpx" color="#9f9fa3"></uni-icons>
						清空历史记录
					</view>
					<uni-popup ref="popup" type="dialog">
						<uni-popup-dialog
							mode="base"
							title="确认清空记录码？"
							@close="close"
							@confirm="confirm"
							confirmText="清空"
						></uni-popup-dialog>
					</uni-popup>
				</view>
			</view>
			<!-- 搜索历史 结束 -->

			<!-- 搜索发现 开始 -->
			<view class="hot-search">
				<view class="hot-search-head m-t">
					<text>搜索发现</text>
					<view @click="showHide" class="animate__animated" hover-class="animate__fadeIn">
						{{ searchDiscovery.find }}
					</view>
				</view>
				<view class="hot-search-body">
					<scroll-view
						:class="[
							'scroll-view',
							searchDiscovery.find === '隐藏'
								? 'animate__animated animate__flipInX'
								: ''
						]"
						scroll-y
						:style="'height:' + searchDiscovery.discoveryHeight + 'rpx'"
					>
						<view
							class="scroll-view-item"
							v-for="(item, i) in searchDiscovery.discoveryList"
							:key="i"
						>
							<uni-tag class="uni-tag" :text="item"></uni-tag>
						</view>
					</scroll-view>
				</view>
			</view>
			<!-- 搜索发现 结束 -->

			<!-- 推荐 开始 -->
			<my-recommend
				:recommendData="recommendData"
				:y_axis="y_axis"
				:class="
					historicalRecords.openClose === '收起' || searchDiscovery.find === '隐藏'
						? 'animate__animated animate__flipInX'
						: 'animate__animated animate__bounceInUp'
				"
			></my-recommend>
			<!-- 推荐 结束 -->
		</view>
		<!-- 搜索区域 结束 -->
	</view>
</template>

<script>
export default {
	data() {
		return {
			search: {
				// 搜索关键字
				keyWord: '',
				// 搜索建议
				proposal: 'UP主 文章 话题 影视...',
				// 延时器id
				timer: null
			},

			// 历史记录
			historicalRecords: {
				// 回到顶部
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				// 搜索历史
				historyList: [],
				// 可视高度,	（展开340rpx,默认125rpx）
				historyHeight: 120,
				// 打开 / 关闭
				openClose: '',
				// 是否滚动
				historyRoll: false,
				// 高度是否自适应
				heightAutomatic: true
			},

			// 搜索发现
			searchDiscovery: {
				discoveryList: [
					'迪丽热巴在现古偶神剧',
					'2022全栈开发报告',
					'泽连斯基:乌克兰可以与俄罗斯“打上十年”',
					'杭州“女主播”事件回顾',
					'缅甸时隔两年后重新开放电影院',
					'习近平情系中国航天事业',
					'本土新增2723+20639',
					'美国2天连发3起大规模枪击事件',
					'赵丽颖和前夫冯绍峰的人生境况',
					'不老女神'
				],
				// 显示 / 隐藏
				find: '显示',
				// 可视高度
				discoveryHeight: 0
			},

			// 搜索推荐数据
			recommendData: [
				{
					id: 0,
					imgUrl: 'https://i.postimg.cc/02xMn9LH/image.png',
					headPortrait: 'https://i.postimg.cc/CMBnj7P1/image.jpg',
					username: '迪丽热巴',
					date: '5分钟前'
				},
				{
					id: 1,
					imgUrl: 'https://i.postimg.cc/vHz1Spy8/image.png',
					headPortrait: 'https://i.postimg.cc/pXK9STtM/image.jpg',
					username: '追剧',
					date: '10分钟前'
				},
				{
					id: 2,
					imgUrl: 'https://i.postimg.cc/8zzF8tkR/image.png',
					headPortrait: 'https://i.postimg.cc/vZM1wsQg/image.png',
					username: '直播',
					date: '1分钟前'
				},
				{
					id: 3,
					imgUrl: 'https://i.postimg.cc/YCDvtYjJ/image.png',
					headPortrait: 'https://i.postimg.cc/HWqc3MRt/image.jpg',
					username: '美食',
					date: '30分钟前'
				}
			],
			// 是否纵向布局
			y_axis: true
		}
	},

	computed: {
		// 搜索记录顺序翻转
		recordRev() {
			return [...this.historicalRecords.historyList].reverse()
		}
	},

	methods: {
		// 清除搜索建议
		clearProposal() {
			this.search.proposal = ''
		},

		// 返回上一页
		previousPage() {
			uni.navigateBack({
				delta: 1
			})
		},

		// 获取搜索内容并进行防抖处理
		input(e) {
			clearTimeout(this.search.timer)
			this.search.timer = setTimeout(() => {}, 500)
		},

		// 回车搜索并添加搜索记录
		enter(e) {
			if (e !== '') {
				this.add_saveRecords(e.value)
			}
		},

		// 添加并保存搜索记录
		add_saveRecords(e) {
			this.search.keyWord = e
			const newRecord = new Set(this.historicalRecords.historyList)
			newRecord.delete(this.search.keyWord)
			newRecord.add(this.search.keyWord)
			this.historicalRecords.historyList = [...newRecord]
			uni.setStorageSync('keyWord', JSON.stringify(this.historicalRecords.historyList))
		},

		// 计算搜索历史滚动高度
		scroll(e) {
			this.historicalRecords.old.scrollTop = e.detail.scrollTop
		},

		// 历史记录伸缩
		stretch() {
			if (this.historicalRecords.openClose === '展开') {
				this.historicalRecords.openClose = '收起'
				this.historicalRecords.historyHeight = 340
				this.y_axis = false
				if (this.searchDiscovery.find === '隐藏') {
					this.searchDiscovery.find = '显示'
					this.searchDiscovery.discoveryHeight = 0
				}
			} else {
				this.historicalRecords.openClose = '展开'
				this.historicalRecords.historyHeight = 125
				this.y_axis = true
				this.historicalRecords.scrollTop = this.historicalRecords.old.scrollTop
				this.$nextTick(() => (this.historicalRecords.scrollTop = 0))
			}
		},

		// 清空历史记录
		deleteHistory() {
			this.$refs.popup.open()
		},
		// 取消删除
		close() {
			this.$refs.popup.close()
		},
		// 确认删除
		confirm() {
			this.historicalRecords.historyList = []
			this.historicalRecords.openClose = ''
			uni.setStorageSync('keyWord', '[]')
		},

		// 搜索发现 显示/隐藏
		showHide() {
			if (this.searchDiscovery.find === '显示') {
				this.searchDiscovery.find = '隐藏'
				this.searchDiscovery.discoveryHeight = 340
				this.y_axis = false
				if (this.historicalRecords.openClose === '收起') {
					this.historicalRecords.openClose = '展开'
					this.historicalRecords.historyHeight = 125
					this.historicalRecords.historyRoll = false
				}
			} else {
				this.searchDiscovery.find = '显示'
				this.searchDiscovery.discoveryHeight = 0
				this.y_axis = true
			}
		}
	},

	onLoad() {
		// 获取缓存的历史记录
		this.historicalRecords.historyList = JSON.parse(uni.getStorageSync('keyWord') || '[]')
	},

	mounted() {
		const query = uni.createSelectorQuery().in(this)
		query
			.select('.scroll-view')
			.boundingClientRect(data => {
				// 历史记录的高度在66px内保持自适应
				if (data.height > 66) {
					this.historicalRecords.heightAutomatic = false //固定高度
					this.historicalRecords.openClose = '展开'
				} else {
					this.historicalRecords.heightAutomatic = true //高度自适应
					this.historicalRecords.openClose = ''
				}
			})
			.exec()
	}
}
</script>

<style lang="less">
.m-t {
	margin-top: 60rpx;
}
.flex {
	display: flex;
}
.search {
	width: 660rpx;
	margin: 0 auto;
	.uni-search-bar {
		width: 95%;
		height: 80rpx;
	}
	.hot-search {
		display: flex;
		flex-wrap: wrap;
		margin-top: 20rpx;
		.hot-search-head {
			display: flex;
			justify-content: space-between;
			width: 100%;
			font-size: 30rpx;
			font-weight: 600;
			view {
				color: #9f9fa3;
			}
		}
		.hot-search-body {
			width: 100%;
			margin-top: 30rpx;
			.scroll-view-item {
				display: inline-block;
				margin: 0 25rpx 25rpx 0;
				.uni-tag {
					border: 0;
					color: #232832;
					background-color: #f4f4f7;
				}
			}
			.delete {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 100%;
				margin-top: 30rpx;
				font-size: 28rpx;
				color: #9f9fa3;
			}
		}
	}
}
</style>
